<template>
  <view class="page">
    <view class="todayProfile">
      <text class="text">今日收益(元)</text>
      <text class="number" :class="profileData.today_profile >= 0 ? 'red' : 'green'">{{
        profileData.today_profile
      }}</text>
      <text class="number" :class="profileData.today_profile >= 0 ? 'red' : 'green'">
        {{ (profileData.today_profile_rt * 100).toFixed(2) }}%
      </text>
    </view>
    <view class="allArea">
      <view class="total-price">
        <text class="item text">总市值</text>
        <text class="item">{{ profileData.total_price }}</text>
      </view>
      <view class="total-profile">
        <text class="item text">总盈亏</text>
        <text class="item" :class="profileData.total_profile >= 0 ? 'red' : 'green'">
          {{ profileData.total_profile }}
        </text>
      </view>
      <view class="total-profile-rate">
        <text
          class="item rate"
          v-if="profileData.total_profile !== 0"
          :class="profileData.total_profile >= 0 ? 'red' : 'green'"
        >
          {{ totalProfileRate }}%
        </text>
      </view>
    </view>
  </view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('stock');

export default {
  computed: {
    ...mapState(['profileData']),
    totalProfileRate() {
      return (
        (this.profileData.total_profile / (this.profileData.total_price - this.profileData.total_profile)) *
        100
      ).toFixed(2);
    }
  },

  methods: {
    ...mapActions(['getProfileDataReq'])
  }
};
</script>

<style lang="scss" scoped>
.page {
  width: 690rpx;
  margin: 30rpx auto;
  padding: 30rpx 0;
  box-shadow: 0px 0px 20rpx 1rpx rgba(37, 84, 181, 0.08);
  border-radius: 28rpx;
}

.todayProfile {
  display: flex;
  justify-content: space-around;
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  overflow: hidden;
}
.number {
  font-size: 30rpx;
}
.text {
  font-size: 30rpx;
}

.allArea {
  width: 690rpx;
  margin-top: 30rpx;
  display: flex;
  justify-content: space-around;
}
.item {
  margin-right: 10rpx;
  font-size: 30rpx;
}
.green {
  color: green;
}
.red {
  color: red;
}
.rate {
  font-size: 30rpx;
}
</style>
